// 1.实现 鼠标移入 产品区域 黄色放大区域显示 
// 2.让遮罩层跟随鼠标移动 1.设置遮罩层的位置  2.需要把鼠标放在遮罩层中间；
// 3.遮罩层 需要边界 ；


let showEle = document.querySelector(".show");

// 获取遮罩层
let maskEle = document.querySelector(".mask");


// 获取 box元素
let boxEle = document.querySelector(".box");


showEle.onmousemove = function (e) {
    // 显示遮罩层 
    maskEle.style.display = "block";
    // console.log(boxEle.offsetLeft);
    // 获取鼠标相对于浏览器的位置；
    var x = e.clientX - boxEle.offsetLeft;
    var y = e.clientY - boxEle.offsetTop;

    // var x = e.offsetX;  // showEle  maskEle 
    // var y = e.offsetY;
    console.log(x, y);

    // 把遮罩层设置到x 和y的位置
    let sx = x - maskEle.offsetWidth/2;
    let sy = y - maskEle.offsetHeight/2;

    // 边界的判断
    // 左边边界
    if(sx<0){
        sx = 0;
    }

    // 上边边界
    if(sy<0){
        sy = 0;
    }

    // 右边边界 
    if(sx>showEle.offsetWidth-maskEle.offsetWidth){
        sx = showEle.offsetWidth-maskEle.offsetWidth;
    }

    // 下边的边界
    if(sy>showEle.offsetHeight-maskEle.offsetHeight){
        sy = showEle.offsetHeight-maskEle.offsetHeight;
    }




    maskEle.style.left = sx  + "px";
    maskEle.style.top = sy + "px";

}

showEle.onmouseleave = function () {
    maskEle.style.display = "none";
}